
define(['echarts',
  './themes/lang/' + window.YUFP_SYS_CONFIG.language + '/pages/joincore/NodeFind.js'
], function (require, exports) {
  exports.ready = function (hashCode, data, cite) {
    yufp.custom.vue({
      el: cite.el,
      data: function () {
        return {
          urls: {
            dataUrl: backend.echainService + '/api/core/flowHistory'
          },
          requestType: 'POST',
          dataParams: {
            instanceId: data.instanceId,
            nodeid: data.nodeId
          },
          nodeid: data.nodeId,
          returnBackFuncId: data.returnBackFuncId,
          returnBackRootId: data.returnBackRootId
        };
      },
      created: function () {
        var me = this;
        me.GetData(me.nodeid);
      },
      methods: {
        GetData: function (nodeId) { // 获取节点信息
          var me = this;
          var allnode = [];// 存放所有节点
          var nodedone = [];// 存放办理过的节点
          var nodedoneinfos = [];// 存放办理过节点的办理信息
          var nodelink = [];// 存放节点连接信息
          var link = [];// 连线数组
          var node = [];// 节点数组
          yufp.service.request({// 获取流程实例
            method: 'GET',
            data: me.dataParams,
            type: 'JSON',
            url: backend.echainService + '/api/core/flowHistory',
            callback: function (code, message, response) {
              console.log(response);
              allnode = response[0];
              nodedone = response[1];
              nodelink = response[2];
              nodedoneinfos = response[3];
              var i = 1;
              var count;
              for (item in allnode) {
                if (item == nodeId) { // 当前节点
                  var nodes = {
                    name: allnode[item], // 节点名称
                    code: item, // 节点id
                    infos: nodedoneinfos[item], // 节点tips信息
                    draggable: true, // 节点是否可拖拽，只在使用力引导布局的时候有用。
                    symbolSize: 50, // 节点大小
                    itemStyle: { // 节点样式设置
                      normal: {
                        color: '#00FF00'
                      },
                      emphasis: {
                        color: '#00FF01'
                      }
                    },
                    category: me.$t('NodeFind.dqjd') // 节点类别
                  };
                } else if (nodedone[item] === undefined) { // 未办理过的节点
                  var nodes = {
                    name: allnode[item],
                    code: item,
                    infos: '',
                    draggable: true, // 节点是否可拖拽，只在使用力引导布局的时候有用。
                    symbolSize: 40,
                    itemStyle: {// 节点颜色
                      normal: {
                        color: '#99CCFF'
                      },
                      emphasis: {// 高亮反应
                        color: '#6699CC'
                      }
                    },
                    category: me.$t('NodeFind.wblgjd')
                  };
                } else { // 办理过的节点
                  var nodes = {
                    name: allnode[item],
                    code: item,
                    infos: nodedoneinfos[item],
                    draggable: true, // 节点是否可拖拽，只在使用力引导布局的时候有用。
                    symbolSize: 40,
                    itemStyle: {
                      normal: {
                        color: '#C0C0C0'
                      },
                      emphasis: {
                        color: '#DDDDDD'
                      }
                    },
                    category: me.$t('NodeFind.yblgjd')
                  };
                }
                node.push(nodes);
              };
              console.log(nodes);
              for (var i = 0; i < nodelink.length; i++) { // 获取节点间连线关系
                var nodelinks = nodelink[i];
                for (var item in nodelinks) {
                  var list = {
                    source: allnode[item], // 前一节点
                    target: allnode[nodelinks[item]] // 指向节点
                  };
                }
                link.push(list);
              }
              console.log(list);
              me.CreateNodePaint(node, link);
            }
          });
        },
        CreateNodePaint: function (node, link) { // 绘制echarts实例
          var me = this;
          var echartsWarp = document.getElementById('workRouteId'); // 获取dom
          var resizeWorldMapContainer = function () { // 用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
            echartsWarp.style.width = window.innerWidth * 3 / 4 + 'px';
            echartsWarp.style.height = window.innerheight / 3 + 'px';
          };
          resizeWorldMapContainer();// 设置容器高宽
          var myChart = echarts.init(echartsWarp);// 基于准备好的dom，初始化echarts实例
          window.onresize = function () { // 用于使chart自适应高度和宽度
            resizeWorldMapContainer();// 重置容器高宽
            myChart.resize();
          };
          // var myChart = echarts.init(document.getElementById('workRouteId'));
          // 指定图表的配置项和数据
          var option = {
            tittle: {}, // 标题
            tooltip: {// 提示信息
              formatter: function (param) {
                if (param.dataType === 'edge') { // 连线tips
                  return param.data.source + '->' + param.data.target;
                }
                // 节点tips
                var str = '<ur style=\'text-align:left\'><li style=\'color: #99CCFF;font:bolder;\'>' + param.data.code + ': ' + param.data.name + '</li>';
                return str + param.data.infos + '</ul>';
              }
            },
            // 设置图例信息
            legend: {
              x: 'right',
              bottom: '5%',
              data: [this.$t('NodeFind.yblgjd'), this.$t('NodeFind.dqjd'), this.$t('NodeFind.wblgjd')]
            },

            animationDurationUpdate: 1500,
            animationEasingUpdate: 'quinticInOut',
            series: [
              {
                type: 'graph',
                top: '10%',
                bottom: '20%',
                force: {
                  repulsion: 1000,
                  edgeLength: [50, 80]
                },
                layout: 'force', // 力引导布局
                symbol: 'circle', // 节点形状
                lineStyle: { // 关系边的公用线条样式。其中 lineStyle.color 支持设置为'source'或者'target'特殊值，此时边会自动取源节点或目标节点的颜色作为自己的颜色。
                  normal: {
                    color: '#000', // 线的颜色[ default: '#aaa' ]
                    width: 2, // 线宽[ default: 1 ]
                    type: 'solid', // 线的类型[ default: solid ]   'dashed'    'dotted'
                    opacity: 0.7, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。[ default: 0.5 ]
                    curveness: 0 // 边的曲度，支持从 0 到 1 的值，值越大曲度越大。[ default: 0 ]
                  }
                },
                label: { // 节点上的标签
                  normal: {
                    show: true, // 是否显示标签
                    position: 'bottom', // 标签位置:'top''left''right''bottom''inside''insideLeft''insideRight''insideTop''insideBottom''insideTopLeft''insideBottomLeft''insideTopRight''insideBottomRight'
                    textStyle: { // 文本样式
                      fontSize: 14,
                      color: '#000'
                    }
                  }
                },
                edgeSymbol: ['circle', 'arrow'], // 连线样式
                edgeSymbolSize: [4, 10],
                edgeLabel: {
                  normal: {
                    textStyle: {
                      fontSize: 15
                    }
                  }
                },
                roam: true, // 是否可缩放
                data: node, // 节点数组
                links: link, // 连线关系
                color: ['#99CCFF', '#00FF00', '#C0C0C0'], // 图例颜色设置
                categories: [{ name: this.$t('NodeFind.wblgjd') }, { name: this.$t('NodeFind.dqjd') }, { name: this.$t('NodeFind.yblgjd') }]// 图例对应标签名

              }
            ]
          };
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
        }
      }
    });
  };

  exports.onmessage = function (type, message) {
  };
  exports.destroy = function (id, cite) {
  };
});
